<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>emp_list</title>
</head>
<body>

<table id="dataTable" border="1" cellspacing="0" th:cellpadding="0" style="text-align: center">
    <tr>
        <th colspan="5">员工信息</th>
    </tr>
    <tr>
        <th>id</th>
        <th>lastName</th>
        <th>email</th>
        <th>gender</th>
        <th>options</th>
    </tr>
    <tr th:each="emp : ${empList}">
        <td th:text="${emp.id}"></td>
        <td th:text="${emp.lastName}"></td>
        <td th:text="${emp.email}"></td>
        <td th:text="${emp.gender}"></td>
        <td>
            <a @click="deleteEmpClick" th:href="@{'/deleteEmp/'+${emp.id}}">delete</a>
            <a th:href="@{'/updateEmp/'+${emp.id}}">update</a>
            <a th:href="@{/toAdd}">add</a>
        </td>
    </tr>
</table>

<form id="deleteFrom" method="post">
    <!--RESTFul的delete和put请求需要借助隐藏类型的post请求-->
    <input type="hidden" name="_method" value="delete">
</form>

<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>

<script type="text/javascript">
    var vue = new Vue({
        el:"#dataTable",
        methods:{
            deleteEmpClick:function (event) {
                //获取dom对象
                var deleteFrom = document.getElementById("deleteFrom");
                //获取超链接的href属性赋值给form表单的action
                deleteFrom.action = event.target.href;
                //提交表单
                deleteFrom.submit();
                //取消超链接的默认行为
                event.preventDefault();
            }
        }
    });
</script>
</body>
</html>
